import React, { useState } from 'react';
import style from './index.module.css'; // 导入样式
import { Flex, Progress } from 'antd';

function Index({ TITLE, imgsData }) {
  const [xxxx, yyyy] = useState(false)

  // 鼠标移动事件
  const handleMouseMove = () => {
    yyyy(true)
  };

  // 鼠标离开时
  const handleMouseLeave = () => {
    yyyy(false)
  };

  return (
    <div className={style.box}>
      {/* 图片容器，绑定鼠标移动和鼠标离开事件 */}
      <div
        className={style.images}
        onMouseMove={handleMouseMove} // 当鼠标移动到容器内时调用 handleMouseMove
        onMouseLeave={handleMouseLeave} // 当鼠标离开容器时调用 handleMouseLeave
      >
        {
          imgsData.map((item, index) => {
            return <img src={item.img} alt="" className={style.imgs} key={index} />
          })
        }
      </div>
      <div style={{ height: "23px" }}></div>
      <div className={style.Title}>{TITLE}</div>
    </div>
  );
}

export default Index; // 导出组件
